<template>
  <div class="match-rule">
    <a-page-header
        style="border: 1px solid rgb(235, 237, 240);background-color: white"
        title="自动匹配规则"
        @back="$router.back()"
    />

    <div class="content">

      <div style="padding: 10px 10px 0;background-color: white">
        <a-alert type="warning"
                 message="当未设置自动匹配时优先应收/付日期排序，即先按照应收/付日期排序，相同日期按照费用类型排序。应收/付日期按照从小到大排序"/>
      </div>

      <a-table :columns="columns" :pagination="pagination"
               :data-source="tableData"
               :loading="loading"
               @change="handleTableChange">
        <template #title>
          <template class="flex justify-between">
            <div class="flex">
              <a-space>
                <a-input v-model:value="matchName" placeholder="请输入匹配规则"/>
                <a-button type="primary" @click="toSearch">搜索</a-button>
                <a-button @click="reset">重置</a-button>
              </a-space>
            </div>
            <a-space>
              <a-button type="primary" @click="addMatchRule">+匹配规则</a-button>
            </a-space>
          </template>
        </template>
        <template #bodyCell="{column,record}">
          <template v-if="column.key=='rule'">
            <span v-if="record.rule==1">费用类型优先排序</span>
            <span v-if="record.rule==2">应收/付日期优先排序</span>
          </template>
          <template v-if="column.key=='action'">
            <a-button type="link" @click="editMatchRule(record)">编辑</a-button>
            <a-button type="text" danger @click="handleRuleRemove(record)">删除</a-button>
          </template>
        </template>
      </a-table>
    </div>

    <!--    新增、编辑-->
    <EditMatchRule :visible="editVisible" :detail="editDetail" @toClose="editVisible=false"
                   @success="editSuccess"/>

  </div>
</template>

<script>
import {toRefs, ref, reactive, computed, watch} from "vue";
import request from '@/common/utils/request'
import utils from '@/common/utils/utils'
import {message} from 'ant-design-vue'
import EditMatchRule from "./EditMatchRule.vue"


export default {
  name: "matchingRules",
  components: {
    EditMatchRule
  },
  setup() {
    const state = reactive({
      tableData: [],
      matchName: "",
      editVisible: false,
      editDetail: undefined,
      loading: false,


    })

    const page = ref(1);
    const total = ref(0);
    const pageSize = ref(10);
    const pagination = computed(() => ({
      total: total.value,
      page: page.value,
      pageSize: pageSize.value,
      showSizeChanger: true,
    }))


    const getRuleList = () => {
      state.loading = true;
      const params = {
        page: page.value,
        pageSize: pageSize.value,
        name: state.matchName,
      }
      request.get("/org", "/stream/match/rules", params).then(res => {
        console.log(res)
        state.tableData = res.list
      }).finally(() => {
        state.loading = false;
      })

    }

    getRuleList()

    const handleTableChange = (pager) => {
      page.value = pager.current;
      pageSize.value = pager.pageSize;
      getRuleList()
    }

    const handleRuleRemove = (record) => {
      utils.modalConfirm({
        content: "确认删除此条匹配规则吗？",
        okType: "danger",
        onOk: () => {
          request
              .del("/org", "/stream/match/rules", {
                id: record.id,
                needMsg: true,
              })
              .then((res) => {
                message.success(res.msg || "删除成功!");
                getRuleList();
              });
        },
      });
    };

    const toSearch = () => {
      getRuleList()
    }

    const reset = () => {
      state.matchName = ""
      getRuleList()
    }

    // 新增匹配规则
    const addMatchRule = () => {
      state.editDetail = undefined;
      state.editVisible = true;
    }
    // 编辑匹配规则
    const editMatchRule = (value) => {
      state.editDetail = value;
      state.editVisible = true;
    }

    const editSuccess = () => {
      getRuleList();
      state.editVisible = false;

    }

    const columns = [
      {
        title: "规则名称",
        key: "name",
        dataIndex: "name"
      },
      {
        title: "所属公司",
        key: "new_company_name",
        dataIndex: "new_company_name"
      },
      {
        title: "一键匹配规则",
        key: "rule"
      },
      {
        title: "操作",
        key: "action"
      }
    ]


    return {
      columns,
      ...toRefs(state),
      pagination,
      handleTableChange,
      addMatchRule,
      editMatchRule,
      toSearch,
      reset,
      handleRuleRemove,
      editSuccess,


    }

  }
}
</script>

<style lang="less" scoped>
.match-rule {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .header {
    background: #fff;
    width: 100%;
    padding-left: 1px;
    border-bottom: 1px solid #f0f2f5;
  }

  .content {
    flex: 1;
    padding: 10px;
    overflow: hidden auto;
    background-color: #f0f2f5;

  }
}

:deep(.ant-table) {
  padding: 10px;
}

</style>
